<template>
  <div class="container">
    <Breadcrumb :items="['menu.list', objtitle[type] + '资产']" />

    <a-card class="general-card" :title="objtitle[type] + '资产'">
      <button @click="addtest">+test</button>
      <!--  -->
      <!-- 地图容器：用 ref 绑定 -->

      <el-tabs v-model="activeDetailTab">
        <el-tab-pane label="详情" name="detail">
          <div v-if="type != 'add'" class="map-point" ref="mapRef" />
          <formCom
            ref="formComDom"
            :option="option"
            :key-count="state.keyCount"
            @submitFn="submitFn"
            @cancleFn="cancleFn"
          />
        </el-tab-pane>

        <el-tab-pane label="日志" name="log">
          <div> 日志 </div>
          <div>
            <span>2022-09-9：温度：11，湿度：22，烟感：正常</span>
          </div>
          <div>
            <span>2022-09-9：温度：11，湿度：22，烟感：正常</span>
          </div>
          <div>
            <span>2022-09-9：温度：11，湿度：22，烟感：正常</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { assetsDetail } from './table.js';
  import {
    equipmentAddApi,
    equipmentDetailApi,
    equipmentUpdateApi,
    userListApi,
  } from '@/utils/apiConfig';
  import { ElMessage } from 'element-plus';
  import { initMaps } from '@/utils/util';
  import { set } from 'lodash';
  const router = useRouter();
  const route = useRoute();
  const { type, id } = route.query;
  const objtitle = {
    add: '新增',
    edit: '编辑',
    view: '查看',
  };
  //assetCategory  资产分类
  const state = reactive({
    keyCount: 3,
  });
  const activeDetailTab = ref('detail');
  // 地图 DOM 引用
  const mapRef = ref<HTMLDivElement | null>(null);
  const map: any = null;

  // 优化：将脚本加载状态存储在window对象上，实现组件级别的跨实例缓存
  // 这样即使组件重新挂载也能识别之前已经加载过的脚本

  //保管人的 api 模糊查询
  function resFunc(query: any) {
    console.log('custodian', query);
    if (!query.trim()) return;
    userListApi({ name: query, orgNumber: '', page: 1, size: 20 }).then(
      (res: any) => {
        const data = res?.data?.records || [];
        assetsDetail.map((one: any) => {
          if (one.field == 'custodian') {
            one.chooseList = data;
          }
          state.keyCount++;
        });
      }
    );
  }
  //绑定函数
  assetsDetail.map((one: any) => {
    if (one.field == 'custodian') {
      one.remoteMethod = resFunc;
    }
  });
  const option = reactive({
    labelWidth: '140px',
    position: 'left',
    showSubmit: type === 'add' || type === 'edit',
    isBetween: true,
    formList: assetsDetail,
  });

  async function inits() {
    // 仅在地图容器存在时初始化地图
    if (id) {
      const res = await equipmentDetailApi({ addPath: id });
      console.log(111, res);
      option.formList.map((one: any) => {
        one.val = res.data[one.field];
      });
      state.keyCount++;
      if (type == 'view') {
        option.formList.forEach((item: any) => {
          item.disabled = true;
        });
      }
    }
    if (!mapRef.value) return;
    initMaps(mapRef, map, {});
  }
  function cancleFn() {
    router.go(-1);
  }

  function submitFn(obj: any) {
    console.log(112, obj);
    switch (type) {
      case 'add':
        equipmentAddApi(obj).then((res: any) => {
          if (res.code === 200) {
            ElMessage.success('新增成功');
            router.push({
              path: '/list/assets',
              query: {},
            });
          }
        });

        break;

      case 'edit':
        equipmentUpdateApi({ ...obj, id }).then((res: any) => {
          if (res.code === 200) {
            ElMessage.success('修改成功');
            router.push({
              path: '/list/assets',
              query: {},
            });
          }
        });
        break;
    }
  }

  function addtest() {
    option.formList.map((one: any) => {
      one.val = 2;
    });
    state.keyCount++;
  }

  onMounted(() => {
    inits();
  });
</script>

<style lang="less" scoped>
  .container {
    padding: 20px;
  }
  .map-point {
    width: 100%;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 20px;
  }

  /* 地图信息窗体样式 */
  :deep(.custom-info-window) {
    color: #fff;
  }

  :deep(.custom-info-window p) {
    color: white;
    margin: 5px 0;
  }

  :deep(.amap-info-content) {
    background-color: #1a365d;
    border-radius: 24px;
    border: 2px solid #2b6cb0;
  }

  :deep(.amap-popup-content) {
    padding: 10px;
  }
</style>
